<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/font1.css" th:href="@{/assets/css/font1.css}"/>
    <link rel="stylesheet" type="text/css" href="css/center.css" th:href="@{/assets/css/center.css}"/>
    <link rel="stylesheet" type="text/css" href="css/dpz.css"  th:href="@{/assets/css/dpz.css}"/>
    <style type="text/css">
        html * {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        *, *:after, *:before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            width: 100%;
            float: right;
            font-size: 100%;
            color: #7f8c97;
            background-color: #e9f0f5;
        }

        img {
            max-width: 100%;
        }

        /* --------------------------------
        Modules - reusable parts of our design
        -------------------------------- */
        .daohang {
            height: 260px;
            margin-top: 50px;
        }

        .cd-container {
            /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */

            width: 90%;
            max-width: 870px;
            margin: 0 auto;
        }

        .cd-container::after {
            /* clearfix */
            content: '';
            display: table;
            clear: both;
        }

        /* --------------------------------
        Main components
        -------------------------------- */
        #cd-timeline {
            position: relative;
            padding: 2em 0;
            margin-top: 8em;
            margin-bottom: 2em;
        }

        #cd-timeline::before {
            /* this is the vertical line */
            content: '';
            position: absolute;
            top: 0;
            left: 18px;
            height: 100%;
            width: 4px;
            background: #d7e4ed;
        }

        @media only screen and (min-width: 1170px) {
            #cd-timeline {
                margin-top: 12em;
                margin-bottom: 3em;
            }

            #cd-timeline::before {
                left: 50%;
                margin-left: -2px;
            }
        }

        .cd-timeline-block {
            position: relative;
            margin: 2em 0;
        }

        .cd-timeline-block :hover {
            opacity: 0.7;
        }

        .cd-timeline-block :active {
            transform: scale(1.1)
        }

        .cd-timeline-block:after {
            content: "";
            display: table;
            clear: both;
        }

        .cd-timeline-block:first-child {
            margin-top: 0;
        }

        .cd-timeline-block:last-child {
            margin-bottom: 0;
        }

        @media only screen and (min-width: 1170px) {
            .cd-timeline-block {
                margin: 4em 0;
            }

            .cd-timeline-block:first-child {
                margin-top: 0;
            }

            .cd-timeline-block:last-child {
                margin-bottom: 0;
            }
        }

        .cd-timeline-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
        }

        .cd-timeline-img img {
            display: block;
            width: 24px;
            height: 24px;
            position: relative;
            left: 50%;
            top: 50%;
            margin-left: -12px;
            margin-top: -12px;
        }

        .cd-timeline-img.cd-picture {
            background: #FFFFFF;
        }

        .cd-timeline-img.cd-movie {
            background: #FFFFFF;
        }

        .cd-timeline-img.cd-location {
            background: #f0ca45;
        }

        @media only screen and (min-width: 1170px) {
            .cd-timeline-img {
                width: 60px;
                height: 60px;
                left: 50%;
                margin-left: -30px;
                /* Force Hardware Acceleration in WebKit */
                -webkit-transform: translateZ(0);
                -webkit-backface-visibility: hidden;
            }

            .cssanimations .cd-timeline-img.is-hidden {
                visibility: hidden;
            }

            .cssanimations .cd-timeline-img.bounce-in {
                visibility: visible;
                -webkit-animation: cd-bounce-1 0.6s;
                -moz-animation: cd-bounce-1 0.6s;
                animation: cd-bounce-1 0.6s;
            }
        }

        .cd-timeline-content {
            position: relative;
            margin-left: 60px;
            background: white;
            border-radius: 0.25em;
            padding: 1em;
            box-shadow: 0 3px 0 #d7e4ed;
        }

        .cd-timeline-content:after {
            content: "";
            display: table;
            clear: both;
        }

        .cd-timeline-content h2 {
            color: #303e49;
        }

        .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
            font-size: 13px;
            font-size: 0.8125rem;
        }

        .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
            display: inline-block;
        }

        .cd-timeline-content p {
            margin: 1em 0;
            line-height: 1.6;
        }

        .cd-timeline-content .cd-read-more {
            float: right;
            padding: .8em 1em;
            background: #acb7c0;
            color: white;
            border-radius: 0.25em;
        }

        .no-touch .cd-timeline-content .cd-read-more:hover {
            background-color: #bac4cb;
        }

        a.cd-read-more:hover {
            text-decoration: none;
            background-color: #424242;
        }

        .cd-timeline-content .cd-date {
            float: left;
            padding: .8em 0;
            opacity: .7;
        }

        .cd-timeline-content::before {
            content: '';
            position: absolute;
            top: 16px;
            right: 100%;
            height: 0;
            width: 0;
            border: 7px solid transparent;
            border-right: 7px solid white;
        }

        @media only screen and (min-width: 768px) {
            .cd-timeline-content h2 {
                font-size: 20px;
                font-size: 1.25rem;
            }

            .cd-timeline-content p {
                font-size: 16px;
                font-size: 1rem;
            }

            .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
                font-size: 14px;
                font-size: 0.875rem;
            }
        }

        @media only screen and (min-width: 1170px) {
            .cd-timeline-content {
                margin-left: 0;
                padding: 1.6em;
                width: 45%;
            }

            .cd-timeline-content :hover {
                opacity: 0.7px;
            }

            .cd-timeline-content::before {
                top: 24px;
                left: 100%;
                border-color: transparent;
                border-left-color: white;
            }

            .cd-timeline-content .cd-read-more {
                float: left;
            }

            .cd-timeline-content .cd-date {
                position: absolute;
                width: 100%;
                left: 122%;
                top: 6px;
                font-size: 16px;
                font-size: 1rem;
            }

            .cd-timeline-block:nth-child(even) .cd-timeline-content {
                float: right;
            }

            .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
                top: 24px;
                left: auto;
                right: 100%;
                border-color: transparent;
                border-right-color: white;
            }

            .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
                float: right;
            }

            .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
                left: auto;
                right: 122%;
                text-align: right;
            }

            .cssanimations .cd-timeline-content.is-hidden {
                visibility: hidden;
            }

            .cssanimations .cd-timeline-content.bounce-in {
                visibility: visible;
                -webkit-animation: cd-bounce-2 0.6s;
                -moz-animation: cd-bounce-2 0.6s;
                animation: cd-bounce-2 0.6s;
            }
        }

        @media only screen and (min-width: 1170px) {
            /* inverse bounce effect on even content blocks */
            .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
                -webkit-animation: cd-bounce-2-inverse 0.6s;
                -moz-animation: cd-bounce-2-inverse 0.6s;
                animation: cd-bounce-2-inverse 0.6s;
            }
        }

        h2.top_title {
            border-bottom: none;
            background: none;
            text-align: center;
            line-height: 32px;
            font-size: 20px
        }

        h2.top_title span {
            font-size: 12px;
            color: #666;
            font-weight: 500
        }


    </style>
</head>
<body>
<div class="daohang">
    <div class="daohang1">
        <div class="daohang2">
            <div class="zhu">
                <a class="logo" href="http://127.0.0.1:8020/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83/index.html?__hbt=1570514532167" title="Zspace">Zspace</a>
                <ul class="lala">
                    <li class="list" id="a1">
                        <div class="qwe">
                            <a class="buhao" href="http://127.0.0.1:8020/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83/index.html?__hbt=1570514532167">
                                <i class="iconfont icon-ren"></i>
                                <a href="mine.html" th:href="@{/mine}"><span>
											个人中心
										</span></a>
                            </a>
                        </div>
                    </li>
                    <li class="list" id="a2">
                        <div class="qwe2">
                            <a class="hao" href="">
                                <i class="iconfont icon-fangzi"></i>
                                <span>
											我的主页
										</span>
                                <i class="iconfont icon-down"></i>
                            </a>
                            <div class="qwe-cont">

                            </div>
                        </div>

                    </li>
                    <li class="list" id="a3">
                        <div class="qwe3">
                            <a class="hao" href="">
                                <i class="iconfont icon-ren3 "></i>
                                <span>
											好友
										</span>
                                <i class="iconfont icon-down"></i>
                            </a>
                            <div class="qwe-cont">

                            </div>
                        </div>
                    </li>
                    <li class="list" id="a4">
                        <div class="qwe4">
                            <a class="hao" href="">
                                <i class="iconfont icon-youxi "></i>
                                <span>
											游戏
										</span>
                                <i class="iconfont icon-down"></i>
                            </a>
                            <div class="qwe-cont">

                            </div>
                        </div>
                    </li>
                    <li class="list" id="a5">
                        <div class="qwe5">
                            <a class="hao" href="">
                                <i class="iconfont icon-yifu "></i>
                                <span>
											装扮
										</span>
                                <i class="iconfont icon-down"></i>
                            </a>
                            <div class="qwe-cont">

                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="yonghu">
                <a class="home" href="">
                    <img class="tu" th:src="@{${session.user.userimg}}" alt="头像" >
                    <span class="name textoverflow" th:text="${session.user.username}"></span>
                </a>
                <a class="tuichu" href="javascript:" title="退出">
                    <i class="iconfont icon-tuichu"></i>
                </a>
                <div class="shezhi">
                    <i class="iconfont icon-shezhi"></i>
                    <ul class="caidan">
                        <li><a href="">修改资料</a></li>
                        <li><a href="">主页排版</a></li>
                        <li><a href="">空间设置</a></li>
                        <li><a href="">权限设置</a></li>
                    </ul>
                </div>
                <div class="kuai">
                    <a class="huangzuan" href="http://127.0.0.1:8020/%E6%94%AF%E4%BB%98/index.html?__hbt=1570539200450" target="_blank" title="点击到支付中心续费">
                        <i class="iconfont icon-chuangxiangzhizunvip"></i>
                    </a>
                    <ul class="vipcai">
                        <li><a href="">升级年费</a></li>
                        <li><a href="">向好友索取</a></li>
                        <li><a href="">赠送给好友</a></li>
                        <li><a href="">vip官网</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="header">
    <section id="cd-timeline" class="cd-container">
        <div class="cd-timeline-block">
            <div class="cd-timeline-img cd-picture">
                <img src="assets/img/t1.jpg" alt="Picture">
            </div>
            <div class="cd-timeline-content">
                <h2>最好的时光在路上</h2>
                <img src="assets/img/t5.jpg"/>
                <p>生命就是一场不断地追逐赛，当你累了，记得放慢速度，路上的风景丝毫不逊于耀眼的终途！</p>

                <span class="cd-date">2014-12-05</span>
            </div>
        </div>
        <div class="cd-timeline-block">
            <div class="cd-timeline-img cd-movie">
                <img src="assets/img/t1.jpg" alt="Picture">
            </div>
            <div class="cd-timeline-content">
                <h2>心有猛虎，细嗅蔷薇</h2>
                <img src="assets/img/t6.jpg"/>
                <p>这么大的世界，谁又不是茫茫众生中的一个，又比蚁群中一只渺小的工蚁要伟大多少</p>

                <span class="cd-date">2014-12-25</span>
            </div>
        </div>
        <div class="cd-timeline-block">
            <div class="cd-timeline-img cd-picture">
                <img src="assets/img/t1.jpg" alt="Picture">
            </div>
            <div class="cd-timeline-content">
                <h2>每天起床第一句</h2>
                <img src="assets/img/t2.jpg"/>
                <p>每天起床第一句，先给自己打个气？ NO！不存在，只有顶着黑眼圈的茫然和对床的恋恋不舍</p>

                <span class="cd-date">2014-12-20</span>
            </div>
        </div>
        <div class="cd-timeline-block">
            <div class="cd-timeline-img cd-movie">
                <img src="assets/img/t1.jpg" alt="Picture">
            </div>
            <div class="cd-timeline-content">
                <h2>唯有美食不可辜负</h2>
                <img src="assets/img/t3.jpg"/>
                <p>我有一颗减肥的心和一个吃货的胃，它俩天天PK，掐指一算，艾玛今天胃又赢了。</p>

                <span class="cd-date">2014-12-14</span>
            </div>
        </div>
        <div class="cd-timeline-block">
            <div class="cd-timeline-img cd-movie">
                <img src="assets/img/t1.jpg" alt="Picture">
            </div>
            <div class="cd-timeline-content">
                <h2>无根之水，静涤心灵</h2>
                <img src="assets/img/t4.jpg"/>
                <p>每当天空下起雨，世界都静了下来，切一杯清茶，安坐窗前，赏雨中山景，聆听滴答之音，好不惬意</p>
                <span class="cd-date">2013-07-06</span>
            </div>
        </div>

    </section>
</div>
</body>
</html>
